<template>
  <div>
    <div ref="h3" style="height: 210px; width: 400;"></div>
  </div>
</template>
<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
  data() {
    return {
      empData: []
    }
  },
  methods: {
    loadPie() {
      const columnPlot = new Column(this.$refs.h3, {
        data:this.empData,
        xField: 'type',
        yField: 'value',
        color:'pink',
        label: {
          position: 'middle', 
          style: {
            fill: 'red',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: '标点',
          },
          sales: {
            alias: '工程',
          },
        },
        coordinate: [{ type: 'reflectY' }],
      });
      columnPlot.render();
    },
    async getEmpData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      this.empData = res.data;
    }
  },
  async mounted() {
    await this.getEmpData();
    this.loadPie();

  }
}
</script>
<style lang="less" scoped></style>